<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 150px;
            height: 250px;
        }
        #imglist img.selected{
            border: 5px solid #f00;
            width: 140px;
            height: 240px;
        }
        .item{
            width: 600px;
            line-height: 40px;
            border-bottom: 1px solid #000;
            padding: 0 30px;
            list-style: none;
        }
        .changeColor{
            background-color: #000;
            color:#fff;
        }
    </style>
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- <script src="./jquery-1.8.3.min.js"></script> -->
</head>
<body>
    <h1>JQ属性操作</h1>

    <button>attr 属性操作</button>

    <hr>
    <div id="imglist">
        <img src="./imgs/pikaq1.jpg" title="pic1" data-img="pikaq1">
        <img src="./imgs/pikaq2.jpg" title="pic2" data-img="pikaq2">
        <img src="./imgs/pikaq3.jpg" title="pic3" data-img="pikaq3">
        <img src="./imgs/pikaq4.jpg" title="pic4" data-img="pikaq4">
        <img src="./imgs/pikaq5.jpg" title="pic5" data-img="pikaq5">
    </div>

    <hr>
    <ul id="newslist">
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
        <li class="item">口袋妖怪是一个时代的记忆,虽然那时候游戏机很贵</li>
    </ul>

    <script>
        $('button').click(function(){
            // // 读取
            // console.log($('#imglist img.selected').attr('title'));
            // console.log($('#imglist img.selected').attr('dtat-img')); // HTML DOM + 自定义
            
            // console.log($('#imglist img.selected').prop('dtat-img')); // HTML DOM
            // console.log($('#imglist img.selected').prop('title'));

            // 写入
            $('#imglist img.selected').attr('src','./imgs/pikaq1.jpg');
            $('#imglist img.selected').attr('data-heheda','pikaq1');
            // 移除
            // $('#imglist img.selected').removeAttr('data-heheda');
            $('#imglist img.selected').removeAttr('class');
        })


        // 选中效果,只允许选一张
        $('#imglist img').click(function(){
            $(this).addClass('selected')
            .siblings('img').removeClass('selected');
        })

        // 划过变色
        // $('#newslist li').mouseover(function(){
        //     $(this).addClass('changeColor');
        // }).mouseout(function(){
        //     $(this).removeClass('changeColor');
        // })

        $('#newslist li').hover(function(){
            $(this).toggleClass('changeColor');
        })
    </script>
</body>
</html>